body {
    display: flex;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* 主内容区域 */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 10px 0;
}

.entry {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 在内容两侧留空，避免挤压 */
    width: 100%; /* 充满屏幕宽度 */
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
    margin: 0 auto; /* 保持居中对齐 */
    padding: 0 10px; /* 增加左右内边距 */
}

.sequence-number {
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.machine-container {
    width: 80%;
    align-items: center;
    border: 1px solid #000;
    padding: 5px;
    justify-content: space-between;
}

.sequence-number {
    flex-shrink: 0; /* 保持固定宽度，不被压缩 */
    text-align: center;
}

.machine-container {
    display: flex;
    flex-grow: 1; /* 占据剩余空间 */
    justify-content: space-between; /* 控制子元素间的间距 */
    align-items: center;
}

.tape {
    display: flex;
    flex-direction: row;
    flex-grow: 1; /* 占据 .entry 的剩余空间 */
    overflow-x: auto; /* 启用水平滚动条，仅在内容溢出时生效 */
    padding: 5px;
    border: 1px solid #ddd; /* 可选：为 tape 增加边框 */
    box-sizing: border-box;
    max-width: calc(100% - 150px); /* 假设左右有固定子元素占据空间，例如按钮或状态显示 */
}

.tape::-webkit-scrollbar {
    height: 8px; /* 滚动条的高度 */
}

.tape::-webkit-scrollbar-thumb {
    background-color: #888; /* 滚动条滑块颜色 */
    border-radius: 4px; /* 滑块圆角 */
}

.tape::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 滑块悬停颜色 */
}

.tape::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道颜色 */
}

.tape .char {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}

.tape .char.current {
    transform: scale(1.2); /* 放大效果 */
    background-color: #ff4757; /* 磁头显著颜色变化 */
    border: 3px solid #ff6b81; /* 更显眼的边框 */
}

.state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #ffa726; /* 使用明亮的橙色，与紫色对比 */
    color: white;
    font-weight: bold;
    border: 2px solid #fb8c00; /* 边框稍深，与背景协调 */
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.3s;
}

.state:hover {
    background-color: #fb8c00; /* 悬停时加深橙色 */
    transform: scale(1.1);
}

.cycles { /* 新增 cycles 样式 */
    font-size: 14px;
    color: #555;
    margin-left: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 5px ;
    border-radius: 5px;
}

.machine-container .char {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #a36dda;
    color: white;
    border: none;
}

.machine-container .char.current {
    border: 2px solid #062975;
}

.machine-container .button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.machine-container .button:hover {
    background-color: #0056b3;
}

.blank-symbol {
    font-size: 14px;
    font-weight: bold; /* 突出显示 */
    color: #333; /* 字体颜色 */
    background-color: #f9f9f9; /* 背景色，保持一致 */
    border: 1px solid #ddd; /* 边框颜色 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    text-align: center; /* 居中对齐 */
    margin-left: 10px; /* 与其他元素保持适当间距 */
    margin-right: 10px;
    display: inline-block; /* 保证大小适配内容 */
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 5px;
}

.modal-content textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}

.modal-content .modal-button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.modal-content .modal-button:hover {
    background-color: #0056b3;
}
